<template>
  <div class="header-nav-dropdown-wrapper">
    <div class="left">
      <img class="img" src="@/assets/img/header/product/nav_img.png" alt=""/>
      <div class="title">快捷链接</div>
      <li v-for="item in SERVICE_LIST" :key="item.value" class="item" @click.stop="navClick(item)" v-show="showli(item)">
        <!-- <img :src="item.icon" alt="" class="item-icon" /> -->
        <!-- v-if="(item.title == '工作台'  && roleId.toString().indexOf('JGGLY') > -1)  -->
        <img :src="item.icon" alt="">
        <div v-if="item.title == '电子签约服务' && contexInfo && contexInfo.roleIds.indexOf('DZQZ') > -1" class="bottom">
          {{ item.title }}
        </div>
        <div v-if="item.title == 'e柜通服务'" class="bottom1">{{ item.title }}</div>
        <div v-if="item.title != 'e柜通服务' && item.title != '电子签约服务'" class="bottom">{{ item.title }}</div>
        <div v-if="item.title == 'e柜通服务'" class="itemson">产品管理人账户服务</div>
        <!-- </div> -->
      </li>
    </div>

    <!-- <div class="leftNav"> -->
    <div class="mleft">
      <div class="title">e柜通</div>
      <div class="main">
        <div class="left1">
          <div class="text1">
            <!-- <img src="@/assets/img/header/service/s15.png" alt="" /> -->
            <div @click.stop="jumpEGT('准入业务')">准入业务</div>
          </div>
          <div class="back gray">
            <div @click.stop="jumpEGT('权益类场外衍生品适当性预审服务')">权益类场外衍生品适当性预审服务</div>
          </div>
          <div class="text1">
            <!-- <img src="@/assets/img/header/service/s15.png" alt="" /> -->
            <div @click.stop="jumpEGT('开户业务')">开户业务</div>
          </div>
          <div class="back">
            <div @click.stop="jumpEGT('开户预约')">开户预约</div>
            <div @click.stop="jumpEGT('开户预约业务查询')">开户预约业务查询</div>
            <div @click.stop="jumpEGT('基金账户开立')">基金账户开立</div>
            <div @click.stop="jumpEGT('OTC账户开立')">OTC账户开立</div>
          </div>
          <div class="text1">
            <!-- <img src="@/assets/img/header/service/s16.png" alt="" /> -->
            <div @click.stop="jumpEGT('账户维护')">账户维护</div>
          </div>
          <div class="back">
            <div @click.stop="jumpEGT('存量产品账户绑定')">存量产品账户绑定</div>
            <div @click.stop="jumpEGT('管理人信息修改')">管理人信息修改</div>
            <div @click.stop="jumpEGT('管理人UKEY绑定')">管理人UKEY绑定</div>
            <div @click.stop="jumpEGT('定制对账单')">定制对账单</div>
          </div>
        </div>
        <div class="right1">
          <div class="text1 ">
            <!-- <img src="@/assets/img/header/service/s17.png" alt="" /> -->
            <div @click.stop="jumpEGT('权限业务')">权限业务</div>
          </div>
          <div class="back height" v-if="index == '1'">
            <div class="text" @click.stop="jumpEGT('北交所新三版权限开通')">北交所新三版权限开通</div>
            <div class="text" @click.stop="jumpEGT('科创板权限管理')">科创板权限管理</div>
            <div class="text" @click.stop="jumpEGT('创业板权限开通')">创业板权限开通</div>
            <div class="text" @click.stop="jumpEGT('港股通权限开通')">港股通权限开通</div>
            <div class="text" @click.stop="jumpEGT('优先股权限管理')">优先股权限管理</div>
            <div class="text" @click.stop="jumpEGT('存托凭证权限管理')">存托凭证权限管理</div>
            <div class="text" @click.stop="jumpEGT('风险警示权限管理')">风险警示权限管理</div>
            <div class="page">
              <div class="left" @click="indexchange('1')"></div>
              <div class="maintext">{{ index }}/2</div>
              <div class="right" @click="indexchange('2')"></div>
            </div>
          </div>
          <div class="back height" v-if="index == '2'">
            <div class="text" @click.stop="jumpEGT('债券专业投资者权限开通')">债券专业投资者权限开通</div>
            <div class="text" @click.stop="jumpEGT('私募资管权限开通')">私募资管权限开通</div>
            <div class="text" @click.stop="jumpEGT('私募基金权限开通')">私募基金权限开通</div>
            <div class="text" @click.stop="jumpEGT('特定债券转让权限管理')">特定债券转让权限管理</div>
            <div class="text" @click.stop="jumpEGT('优先股转让权限开通')">优先股转让权限开通</div>
            <div class="text" @click.stop="jumpEGT('实时盈权限开通')">实时盈权限开通</div>
            <div class="text" @click.stop="jumpEGT('大宗承诺函签署')">大宗承诺函签署</div>
            <div class="page">
              <div class="left" @click="indexchange('1')"></div>
              <div class="maintext">{{ index }}/2</div>
              <div class="right" @click="indexchange('2')"></div>
            </div>
          </div>
          <div class="text1">
            <!-- <img src="@/assets/img/header/service/s18.png" alt="" /> -->
            <div @click.stop="jumpEGT('查询业务')">查询业务</div>
          </div>
          <div class="back">
            <div class="text" @click.stop="jumpEGT('业务办理结果查询')">业务办理结果查询</div>
            <div class="text" @click.stop="jumpEGT('账户权限查询')">账户权限查询</div>
            <div class="text" @click.stop="jumpEGT('账户信息查询')">账户信息查询</div>
          </div>
        </div>
      </div>
      <div v-if="contexInfo && contexInfo.roleIds.indexOf('DZQZ') > -1">
        <div class="title">电子签约服务</div>
        <div class="main">
          <div class="left1">
            <div class="text1">
              <!-- <img src="@/assets/img/header/service/nav_service_certificate_icon16.png" alt="" /> -->
              <div class="" @click.stop="jumpSES('UKey证书服务')">UKey证书服务</div>
            </div>
            <div class="back">
              <div @click.stop="jumpSES('证书申请')">证书申请</div>
              <div @click.stop="jumpSES('证书申请查询')">证书申请查询</div>
              <div @click.stop="jumpSES('证书更新')">证书更新</div>
              <div @click.stop="jumpSES('证书信息变更')">证书信息变更</div>
              <div @click.stop="jumpSES('证书补办')">证书补办</div>
            </div>
          </div>
          <div class="right1">
            <div class="text1">
              <!-- <img src="@/assets/img/header/service/nav_service_Signing_icon62.png" alt="" /> -->
              <div @click.stop="jumpSES('电子签约服务')">电子签约服务</div>
            </div>
            <div class="back">
              <div class="text" @click.stop="jumpSES('待签署协议')">待签署协议</div>
              <div class="text" @click.stop="jumpSES('已签署协议')">已签署协议</div>
              <div class="text" @click.stop="jumpSES('已作废协议')">已作废协议</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mright">
      <div class="title">投资顾问服务</div>
      <div class="main">
        <div class="left1">
          <div class="text1">
            <!-- <img src="@/assets/img/header/service/s11.png" alt="" /> -->
            <div class="" @click.stop="jumpTZGW('交易管理')">交易管理</div>
          </div>
          <div class="back">
            <div @click.stop="jumpTZGW('投资指令接收')">投资指令接收</div>
            <div @click.stop="jumpTZGW('交易台账')">交易台账</div>
          </div>
          <div class="text1">
            <!-- <img src="@/assets/img/header/service/s12.png" alt="" /> -->
            <div @click.stop="jumpTZGW('报表管理')">报表管理</div>
          </div>
          <div class="back">
            <div @click.stop="jumpTZGW('对账管理')">对账管理</div>
            <div @click.stop="jumpTZGW('投研动态')">投研动态</div>
          </div>
        </div>
        <div class="right1">
          <div class="text">
            <!-- <img src="@/assets/img/header/service/s13.png" alt="" /> -->
            <div @click.stop="jumpTZGW('清算管理')">清算管理</div>
          </div>
          <div class="text1">
            <!-- <img src="@/assets/img/header/service/s14.png" alt="" /> -->
            <div @click.stop="jumpTZGW('组合管理')">组合管理</div>
          </div>
          <div class="back">
            <div @click.stop="jumpTZGW('组合一览')">组合一览</div>
            <div @click.stop="jumpTZGW('账簿管理')">账簿管理</div>
          </div>
        </div>
      </div>
    </div>
    <DownloadDialog :downloadDialog="downloadDialog" />
  </div>
  <!-- <div class="header-nav-dropdown-wrapper">
    <ul class="ul-dropdown-list">
      <li v-for="item in SERVICE_LIST" :key="item.value" class="item item-service" @click.stop="navClick(item)">
        <img :src="item.icon" alt="" class="item-icon" />
        <span class="item-title">{{ item.title }}</span>
      </li>
    </ul>
  </div> -->
</template>
<script>
import { SERVICE_LIST } from './navmenu.data';
import { mapGetters } from 'vuex';
import { unitJumpLogin } from '@/utils/verify';
export default {
  data () {
    return {
      SERVICE_LIST,
      index: '1'
    };
  },
  computed: {
    ...mapGetters({
      contexInfo: 'contexInfo'
    })
  },
  methods: {
    showli (item) {
      if ((item.title == '电子签约服务' && this.contexInfo && this.contexInfo.roleIds.indexOf('DZQZ') > -1) || item.title != '电子签约服务') {
        return true;
      } else {
        return false;
      }
    },
    indexchange (item) {
      this.index = item;
    },
    navClick (item) {
      // 投资顾问服务
      if (item.title === 'e柜通服务') {
        window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_HOME);
      } else if (item.title === '专业化交易服务') {
        window.location.href = process.env.VUE_APP_SERVICE_SERVICETRADE;
      } else if (item.title === '投资顾问服务') {
        // this.$emit('nav-click', item);
        this.$message('敬请期待');
      } else {
        this.$emit('nav-click', item);
      }
      // this.$emit('nav-click', item);
    },

    jumpEGT (name) {
      switch (name) {
        case '开户业务':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_HOME);
          return;
        case '基金账户开立':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_JJKH);
          return;
        case '账户维护':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_HOME);
          return;
        case '存量产品账户绑定':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_ZHBD);
          return;
        case '管理人信息修改':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_GLRXXXG);
          return;
        case '管理人UKEY绑定':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_GLRUKEYBD);
          return;
        case '定制对账单':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_DZDZD);
          return;
        case '权限业务':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_HOME);
          return;
        case '查询业务':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_HOME);
          return;
        case '科创板权限管理':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_KCBQ);
          return;
        case '创业板权限开通':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_CYBQ);
          return;
        case '港股通权限开通':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_GGBQ);
          return;
        case '北交所新三版权限开通':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_BJQX);
          return;
        case '优先股权限管理':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_YXGQ);
          return;
        case '存托凭证权限管理':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_CTPZ);
          return;
        case '业务办理结果查询':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_YWBL);
          return;
        case '风险警示权限管理':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_FXJS);
          return;
        case '大宗承诺函签署':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_DZCNH);
          return;
        case '账户权限查询':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_ZHQX);
          return;
        case '账户信息查询':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_ZHXX);
          return;
        case '债券专业投资者权限开通':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_ZQZYTZZ);
          return;
        case '私募资管权限开通':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_SMZG);
          return;
        case '私募基金权限开通':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_SMJJ);
          return;
        case '特定债券转让权限管理':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_TDZQZR);
          return;
        case '优先股转让权限开通':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_YXGZR);
          return;
        case '实时盈权限开通':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_SSY);
          return;
        case 'OTC账户开立':
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_OTC);
          return;
        default:
          window.location.href = unitJumpLogin(4, process.env.VUE_APP_SERVICE_EGT_HOME);
      }
    },
    jumpTZGW (name) {
      switch (name) {
        case '交易管理':
          this.$message('敬请期待');
          return;
        case '投资指令接收':
          if (process.env.VUE_APP_Open == 'false') {
            this.$message('敬请期待');
            return;
          }
          window.location.href = process.env.VUE_APP_SERVICE_TZGW_TZZLJS;
          return;
        case '交易台账':
          if (process.env.VUE_APP_Open == 'false') {
            this.$message('敬请期待');
            return;
          }
          window.location.href = process.env.VUE_APP_SERVICE_TZGW_JYTZ;
          return;
        case '报表管理':
          if (process.env.VUE_APP_Open == 'false') {
            this.$message('敬请期待');
            return;
          }
          window.location.href = process.env.VUE_APP_SERVICE_TZGW_BBGL;
          return;
        case '对账管理':
          if (process.env.VUE_APP_Open == 'false') {
            this.$message('敬请期待');
            return;
          }
          window.location.href = process.env.VUE_APP_SERVICE_TZGW_DZGL;
          return;
        case '投研动态':
          if (process.env.VUE_APP_Open == 'false') {
            this.$message('敬请期待');
            return;
          }
          window.location.href = process.env.VUE_APP_SERVICE_TZGW_TYDT;
          return;
        case '清算管理':
          if (process.env.VUE_APP_Open == 'false') {
            this.$message('敬请期待');
            return;
          }
          window.location.href = process.env.VUE_APP_SERVICE_TZGW_QSGL;
          return;
        case '组合管理':
          if (process.env.VUE_APP_Open == 'false') {
            this.$message('敬请期待');
            return;
          }
          window.location.href = process.env.VUE_APP_SERVICE_TZGW_ZHYL;
          return;
        case '组合一览':
          if (process.env.VUE_APP_Open == 'false') {
            this.$message('敬请期待');
            return;
          }
          window.location.href = process.env.VUE_APP_SERVICE_TZGW_ZHYL;
          return;
        case '账簿管理':
          if (process.env.VUE_APP_Open == 'false') {
            this.$message('敬请期待');
            return;
          }
          window.location.href = process.env.VUE_APP_SERVICE_TZGW_ZBGL;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.header-nav-dropdown-wrapper {
  background: #FFFFFF;
  border: 1px solid #D8DCE6;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  width:1202px;
  .leftNav {
    display: flex;
    flex-wrap: wrap;
    // mleft + mright + 40 * 2
    width: 760px;
  }
  .left {
    padding: 24px 24px 0;
    position: relative;
    // background-color: #F5FAFF;
    background: url('~@/assets/img/header/product/nav_bg.png') 0px 247px no-repeat #F5FAFF;
    .img{
      width: 131px;
      height: 158px;
      position: absolute;
      left: 157px !important;
      top: 255px !important;
    }
    .title{
      font-family: 'Source Han Sans CN';
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      /* identical to box height */
      color: #333333;
    }
    .item {
      width: 263px;
      height: 56px;
      background: linear-gradient(185.89deg, #E8EEFD 8.08%, rgba(248, 251, 255, 0.88) 81.76%);
      border: 2px solid #FFFFFF;
      box-shadow: 0px -4px 16px -2px #FFFFFF, 0px 2px 2px rgba(197, 210, 232, 0.4);
      border-radius: 4px;
      margin-top: 10px;
      position: relative;
      cursor: pointer;
    }
    img{
      position: absolute;
      width: 30px;
      height: 30px;
      left: 20px;
      top: 13px;
    }
    .bottom {
      font-family: 'Source Han Sans CN';
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 56px;
      /* identical to box height */
      padding-left: 68px;
      color: #325993;
      cursor: pointer;
      &:hover {
        color: $app-main-color;
      }
    }
    .bottom1 {
      font-family: 'Source Han Sans CN';
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 15px;
      // margin-top: 15px;
      color: #325993;
      padding-top: 7px;
      cursor: pointer;
      &:hover {
        color: $app-main-color;
      }
      padding-left: 68px;
      // background-size: 10px 10px;
    }
    .itemson {
      position: absolute;
      top: 51px;
      left: 0;
      font-family: 'Source Han Sans CN';
      padding-left: 68px;
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 18px;
      margin-top: -22px;
      /* identical to box height */
      color: #7a7d96;
    }
    .title1 {
      width: 232px;
      font-family: 'Source Han Sans CN';
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      // line-height: 60px;
      /* identical to box height */
      margin-top: 15px;
      color: #1c203f;
    }
  }
  .mleft {
    margin: 25px 20px 0;
    // width: 340px;
    width: 394px;;
    .title {
      font-family: 'Source Han Sans CN';
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      /* identical to box height */

      color: #000000;
      width: 394px;
      /* identical to box height */
      padding-bottom: 8px;
      border-bottom: 1px solid #D5D8DE;
    }
    .main {
      margin-top: 14px;
      display: flex;
      .left1 {
        width: 187px;
        .text {
          display: flex;
          font-family: Source Han Sans CN;
          font-style: normal;
          cursor: pointer;
          font-weight: bold;
          cursor: pointer;
          font-size: 14px;
          &:hover {
            color: $app-main-color;
          }
          line-height: 21px;
          /* identical to box height */
          color: #000000;
          cursor: pointer;
          &:hover {
            color: $app-main-color;
          }
          img {
            width: 16px;
            height: 16px;
            margin-right: 6px;
            margin-top: 2px;
          }
          div {
            flex: 1;
            background: url('~@/assets/img/header/product/arrow-blue.png') 69px 3px no-repeat;
          }
        }
        .text1 {
          cursor: pointer;
          &:hover {
            color: $app-main-color;
          }
          font-family: 'Source Han Sans CN';
          font-style: normal;
          font-weight: 500;
          font-size: 14px;
          line-height: 21px;
          /* identical to box height */
          color: #4B5668;

          margin-bottom: 7px;
        }
        .back {
          width: 187px;
          // height: 86px;
          // left: 580px;
          // top: 221px;
          // padding: 8px 0 0;
          padding-top: 8px;

          background: #F5F8FC;
          border-radius: 2px;
          margin-bottom: 14px;
          margin-top: 7px;
          &.gray{
            // color: #999 !important;
            div{
              color: #999 !important;
            }
            &:hover {
              color:  #999;
            }
          }
          div {
            padding: 0  16px;
            font-family: 'Source Han Sans CN';
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: #000000;
            &:hover {
              color: $app-main-color;
            }
            cursor: pointer;
            padding-bottom: 8px;
          }
        }
      }
      .right1 {
        margin-left: 20px;
        width: 187px;
        .text {
          display: flex;
          font-family: Source Han Sans CN;
          font-style: normal;
          font-weight: bold;
          cursor: pointer;
          font-size: 14px;
          &:hover {
            color: $app-main-color;
          }
          line-height: 21px;
          /* identical to box height */
          color: #000000;
          img {
            width: 16px;
            height: 16px;
            margin-right: 6px;
            margin-top: 2px;
          }
          div {
            flex: 1;
            background: url('~@/assets/img/header/product/arrow-blue.png') 69px 3px no-repeat;
          }
        }
        .text1 {
          cursor: pointer;
          &:hover {
            color: $app-main-color;
          }
          font-family: 'Source Han Sans CN';
          font-style: normal;
          font-weight: 500;
          font-size: 14px;
          line-height: 21px;
          /* identical to box height */
          color: #4B5668;

          margin-bottom: 7px;
        }
        .back {
          width: 187px;
          padding-top: 8px;

          background: #F5F8FC;
          border-radius: 2px;
          margin-bottom: 14px;
          margin-top: 7px;
          &.height{
            height: 217px;
            position: relative;
            .page{
              position: absolute;
              bottom: 8px;
              left: 60px;
              display: flex;
              .left{
                padding: 0;
                margin: 0;
                width: 12px;
                height: 21px;
                background: url('~@/assets/img/header/product/left_arrow.png') 0 4.5px no-repeat;
              }
              .right{
                padding: 0;
                margin: 0;
                width: 12px;
                height: 21px;
                background: url('~@/assets/img/header/product/right_arrow.png') 0 4.5px  no-repeat;
              }
              .maintext{
                font-family: 'Source Han Sans CN';
                font-style: normal;
                font-weight: 400;
                margin: 0 10px;
                font-size: 14px;
                line-height: 21px;
                /* identical to box height */
                color: #2B86DD;
              }
            }
          }
          .text {
            padding-left: 16px;
            font-family: 'Source Han Sans CN';
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: #000000;

            &:hover {
              color: $app-main-color;
            }
            cursor: pointer;
            padding-bottom: 8px;
          }
        }
      }
    }
  }
  .mright {
    margin: 25px 20px 0;
    width: 394px;
    .title {
      font-family: 'Source Han Sans CN';
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      /* identical to box height */

      color: #000000;
      width: 394px;
      /* identical to box height */
      padding-bottom: 8px;
      border-bottom: 1px solid #D5D8DE;
    }
    .main {
      margin-top: 14px;
      display: flex;
      .left1 {
        width: 187px;
        .text {
          display: flex;
          font-family: Source Han Sans CN;
          font-style: normal;
          cursor: pointer;
          font-weight: bold;
          cursor: pointer;
          font-size: 14px;
          &:hover {
            color: $app-main-color;
          }
          line-height: 21px;
          /* identical to box height */
          color: #000000;
          cursor: pointer;
          &:hover {
            color: $app-main-color;
          }
          img {
            width: 16px;
            height: 16px;
            margin-right: 6px;
            margin-top: 2px;
          }
          div {
            flex: 1;
            background: url('~@/assets/img/header/product/arrow-blue.png') 69px 3px no-repeat;
          }
        }
        .text1 {
          cursor: pointer;
          &:hover {
            color: $app-main-color;
          }
          font-family: 'Source Han Sans CN';
          font-style: normal;
          font-weight: 500;
          font-size: 14px;
          line-height: 21px;
          /* identical to box height */
          color: #4B5668;

          margin-bottom: 7px;
        }
        .back {
          width: 187px;
          // height: 86px;
          // left: 580px;
          // top: 221px;
          // padding: 8px 0 0;
          padding-top: 8px;

          background: #F5F8FC;
          border-radius: 2px;
          margin-bottom: 14px;
          margin-top: 7px;

          div {
            padding-left: 16px;
            font-family: 'Source Han Sans CN';
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: #000000;

            &:hover {
              color: $app-main-color;
            }
            cursor: pointer;
            padding-bottom: 8px;
          }
        }
      }
      .right1 {
        margin-left: 20px;
        width: 187px;
        .text {
          display: flex;
          margin-bottom: 19px;
          cursor: pointer;
          &:hover {
            color: $app-main-color;
          }
          font-family: 'Source Han Sans CN';
          font-style: normal;
          font-weight: 500;
          font-size: 14px;
          line-height: 21px;
          /* identical to box height */

          color: #4B5668;
          img {
            width: 16px;
            height: 16px;
            margin-right: 6px;
            margin-top: 2px;
          }
          div {
            flex: 1;
            background: url('~@/assets/img/header/product/arrow-blue.png') 69px 3px no-repeat;
          }
        }
        .text1 {
          cursor: pointer;
          &:hover {
            color: $app-main-color;
          }
          font-family: 'Source Han Sans CN';
          font-style: normal;
          font-weight: 500;
          font-size: 14px;
          line-height: 21px;
          /* identical to box height */
          color: #4B5668;

          margin-bottom: 7px;
        }
        .back {
          width: 187px;
          // height: 86px;
          // left: 580px;
          // top: 221px;
          // padding: 8px 0 0;
          padding-top: 8px;

          background: #F5F8FC;
          border-radius: 2px;
          margin-bottom: 14px;
          margin-top: 7px;

          div {
            padding-left: 16px;
            font-family: 'Source Han Sans CN';
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: #000000;

            &:hover {
              color: $app-main-color;
            }
            cursor: pointer;
            padding-bottom: 8px;
          }
        }
      }
    }
  }
  .right {
    margin: 20px 20px 0;
    width: 200px;
    .rmain {
      display: flex;
      width: 200px;
      height: 56px;
      background: linear-gradient(180deg, #eef4ff 0%, #f4f8ff 100%);
      border: 2px solid #ffffff;
      box-sizing: border-box;
      box-shadow: 0px 2px 4px 2px rgba(197, 210, 232, 0.88);
      border-radius: 4px;
      img {
        width: 34px;
        height: 34px;
        margin: 12px 0 0 20px;
      }
      div {
        cursor: pointer;
        &:hover {
          color: $app-main-color;
        }
        width: 64px;
        height: 24px;
        font-family: Source Han Sans CN;
        font-style: normal;
        font-weight: bold;
        font-size: 16px;
        line-height: 24px;
        /* identical to box height */
        margin: 16px 0 0 17px;

        color: #1c203f;
      }
    }
  }
  .back {
    div {
      cursor: pointer;
    }
  }
}
</style>
